<template>
    <box left="59px"
         top="190px"
         width="1257px"
         height="354px"
         title="口碑概况">
        <div class="flex">
            <div class="data">
                <div class="item flex">
                    <img src="../../../assets/img/home/kb-icon-1.png"
                         class="icon"
                         alt="" />
                    <div>
                        <p class="val">
                            {{ info.total ? info.total : ""
                            }}<span class="unit">单</span>
                        </p>
                        <div class="flex">
                            <label for="">总评价量</label>
                        </div>
                    </div>
                </div>
                <div class="item flex">
                    <img src="../../../assets/img/home/kb-icon-2.png"
                         class="icon"
                         alt="" />
                    <div class="error">
                        <p class="val">
                            {{ info.bad ? info.bad : ""
                            }}<span class="unit">单</span>
                        </p>
                        <div class="flex">
                            <label for="">月差评量</label>
                        </div>
                    </div>
                </div>
            </div>
            <my-title title="日差评量趋势图"
                      left="290px"
                      top="50px"></my-title>
            <div class="chart"
                 ref="chart1"></div>
            <div class="chart"
                 ref="chart2"></div>
        </div>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    watch: {
        info: {
            handler(newVal) {
                this.lineChartInit(newVal.lineChartData)
                this.barChartInit(
                    newVal.barChartData.count,
                    newVal.barChartData.bad,
                    newVal.barChartData.xData
                )
            },
            deep: true,
        },
    },
    methods: {
        lineChartInit(data) {
            let _chart = this.$echarts.init(this.$refs['chart1'])
            let _options = {
                grid: {
                    top: '50',
                    right: '20',
                    left: '40',
                    bottom: '30', //图表尺寸大小
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    color: '#59588D',
                    data: data.map((item) => item.name),
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        axisLabel: {
                            color: '#8fadcc',
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '日差评量',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#19b4ff',
                                lineStyle: {
                                    color: '#19b4ff',
                                    width: 2,
                                },
                                areaStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(58,132,255,0)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(58,132,255,0.35)',
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        data: data.map((item) => item.value),
                    },
                ],
            }
            _chart.setOption(_options)
        },
        barChartInit(countData, badData, xData) {
            let _chart = this.$echarts.init(this.$refs['chart2'])
            let _option = {
                grid: {
                    top: '25%',
                    bottom: '10%', //也可设置left和right设置距离来控制图表的大小
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: false, //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#8fadcc', //X轴文字颜色
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '数量/单',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#8fadcc',
                            },
                        },
                    },
                    {
                        type: 'value',
                        name: '差评率/%',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        position: 'right',
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#8fadcc',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: 14,

                        itemStyle: {
                            normal: {
                                color: '#0bafe6',
                            },
                        },
                        data: countData,
                    },
                    {
                        name: '差评率',
                        type: 'line',

                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#ffa200',
                            },
                        },
                        data: badData,
                    },
                ],
            }
            _chart.setOption(_option)
        },
    },
    created() {},
}
</script>
<style lang='less' scoped>
.data {
    width: 260px;
    height: 268px;
    border-right: 1px dashed #114371;
    .item {
        width: 200px;
        margin: 45px auto;
    }
    .icon {
        width: 72px;
        height: 70px;
        margin-right: 16px;
    }
    .val {
        font-size: 20px;
        color: #33bbff;
        margin-bottom: 10px;
        .unit {
            font-size: 12px;
            color: #8fadcc;
            margin-left: 4px;
        }
    }
    label {
        font-size: 14px;
    }
    .per {
        font-size: 14px;
        color: #00e5ac;
        margin-left: 10px;
    }
    .arrow {
        width: 10px;
        height: 10px;
    }
    .error {
        .val {
            color: #ff5959;
        }
    }
}
.chart {
    width: 480px;
    height: 268px;
}
</style>